<template>
    <div class="all">
        <div class="over">
            <div class="top">
                <img class="top_logo" src="../../assets/adver_video_detail/tiktok_logo.png"/>
                <div class="top_title">
                    <h3>{{VideoAndCreater.vname}}</h3>
                </div>
                <div class="top_message">
                    <img src="../../assets/adver_video_detail/arcoDesign-caret-right.png"/>
                    <a class="top_message1">10.0万</a>
                    <img src="../../assets/adver_video_detail/ze-like-o.png"/>
                    <a class="top_message1">10.0万</a>
                     <img src="../../assets/adver_video_detail/ze-star-o.png"/>
                    <a class="top_message1">10.0万</a>
                     <img src="../../assets/adver_video_detail/iconPark-share-one.png"/>
                    <a class="top_message1">10.0万</a>
                    <img src="../../assets/adver_video_detail/if-fire-burn (2).png"/>
                    <a class="top_message2">179</a>
                    <a class="top_message3">发布时间：</a>
                     <a class="top_message3">{{VideoAndCreater.vreleasetime}}</a>
                </div>
            </div>
            <div class="center">
                <video v-if="chooseVideo==0" class="center_vedio" :src="vsource" controls="controls" autoplay>
                </video>
                <video v-if="chooseVideo==2" class="center_vedio" src="../../assets/ThreeVideo/map.mp4" controls="controls" autoplay>
                </video>
                 <video v-if="chooseVideo==1" class="center_vedio" src="../../assets/ThreeVideo/bag.mp4" controls="controls" autoplay>
                </video>
                 <video v-if="chooseVideo==3" class="center_vedio" src="../../assets/ThreeVideo/diannao.mp4" controls="controls" autoplay>
                </video>
            </div>
            <div class="right">
                <div class="right_1">
                    <img src="../../assets/adver_video_detail/fa-user-circle.png"/>
                    <a class="right_1_1">昵称：</a>
                    <a class="right_1_2">{{VideoAndCreater.creater.cname}}</a>
                    <div class="right_1_3">
                        <a>{{VideoAndCreater.creater.cemail}}</a>
                    </div>
                    <div class="right_1_4">
                        <a>{{VideoAndCreater.creater.cphone}}</a>
                    </div>
                </div>
                <div class="right_2">
                    <img class="right_2_1" src="../../assets/adver_video_detail/tiktok_logo.png"/>
                    <a class="right_2_2">{{VideoAndCreater.creater.others[0].othername}}</a>
                    <div class="right_2_3">{{VideoAndCreater.creater.others[0].othernum}}W</div>
                    <el-button @click="push(VideoAndCreater.cid,VideoAndCreater.vid)" class="right_2_4" type="warning">查看个人中心</el-button>
                </div>
                <div class="new_1">
                    <a class="new_1_1">视频平均播放量：</a>
                     <a class="new_1_2">1615.4w</a>
                </div>
                 <div class="new_1">
                    <a class="new_1_1">平均赞粉比：</a>
                     <a class="new_1_2">10.83%</a>
                </div>
                <div class="new_2">
                    <img src="../../assets/adver_video_detail/new1.png" >
                    <a class="new_2_1">粉丝特征</a>
                    <div>
                        <img src="../../assets/adver_video_detail/new6.png" >
                        <img src="../../assets/adver_video_detail/new5.png" >
                        <img src="../../assets/adver_video_detail/new4.png" >
                    </div>
                </div>
                <div class="new_2">
                    <img src="../../assets/adver_video_detail/new2.png" >
                    <a class="new_2_1">粉丝分布</a>
                    <div>
                        <img src="../../assets/adver_video_detail/new3.png" >
                    </div>
                </div>
                <div >
                    <img class="new3" src="../../assets/adver_video_detail/new8.png" >
                </div>
                <div class="old_1">
                    <div class="right_title_1"><a>视频简介</a></div>
                    <div class="right_title_2">
                        <a>{{VideoAndCreater.vintroduction}}</a>
                      
                    </div>
                    <div class="right_title_1_1"><a >意向广告主</a></div>
                    <div class="right_title_2_1">
                        <a>{{VideoAndCreater.vrequirement}}</a>
                        <!-- <div>1、广告本身不破化视频的效果</div>
                        <div>2、广告能够贴合保护野生动物的主题</div>
                        <div>3、希望广告是公益类的产品</div>
                        <div>4、希望广告企业对了解、懂得、尊重动物保护事业</div>
                        <div>5、相关广告产品费用由双方共同商讨</div>
                        <div>6、.......................</div> -->
                        <!-- <div>5、相关广告产品费用由双方共同商讨</div>
                        <div>5、相关广告产品费用由双方共同商讨</div> -->
                    </div>
                </div>
            </div>
            <div class="bottom" v-for="(item,index) in AllvideoAdver" :key="index">
                <div class="bottom_item1">  
                    <div class="bottom_item11">
                        <div class="allwrite">
                            <div class="item_write">
                                <div class="item_write1">
                                    <a>广告类型</a>
                                    <a class="bofang">按播放量合作</a>
                                </div>
                                <div  class="item_write2">
                                    <a>播放量</a>
                                    <el-input @blur="changemoney(index)" v-model="SendCoMessage.input1[index]" class="item_write2_1" placeholder="请输入次数"></el-input>
                                    <a>万次</a>
                                </div>
                                <el-dropdown size="small" split-button type="info" class="Ihope">
                                预览产品效果
                                <el-dropdown-menu slot="dropdown" split-button="true" show-timeout="0">
                                    <el-dropdown-item @click.native="last()">黑色皮包</el-dropdown-item>
                                    <el-dropdown-item>白色帽子</el-dropdown-item>
                                    <el-dropdown-item>白色花盆</el-dropdown-item>
                                </el-dropdown-menu>
                                </el-dropdown>
                            </div>

                            <div class="item_button">
                                <h3 class="item_button_1">平台底价:</h3>
                                <h1 class="item_button_2" >{{money[index]}}元</h1>
                                <el-button   @click=" dialogOpen(item.apid,item.coid)" :class="item_button1" type="warning">{{button_message}}</el-button>
                            </div>
                        </div>
                        <div class="img-">
                            <img class="fengmiana" :src="VideoAndCreater.fengmian"/>
                            <div class="img-1"></div>
                        </div>
                        <div class="item1_message">
                            <div class="item1_message_title">广告位{{index+1}}</div>
                            <div class="item1_message1">时间：
                                <a>{{item.apbegintime}}</a>
                                <a>-</a>
                                <a>{{item.apfinaltime}}</a>
                            </div>
                            <div class="item1_message1">场景：<a>{{item.asession}}</a></div>
                            <div class="item1_message1">状态：已合作 <a>{{item.cooperations.length}}</a> 个广告商</div>
                            <div class="item1_message1">大小：<a>{{item.apsize}}</a> 10%</div>
                        </div>

                        <div class="item_message_1">
                            <div class="item_message_1_1">
                                <div class="item_message_1_1_1" v-for="(item2,index2) in AllvideoAdver[index].cooperations" :key="index2">
                                    <a class="adverwidth">
                                        <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                        <a class="font_group">{{item2.advertisername}}</a>
                                    </a>
                                    <a class="item_message_1_2_1" >
                                        <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                        <a class="font_group">{{item2.productname}}</a>
                                    </a>
                                    <el-button v-if="item2.costate=='进行中'" class="smallButton" type="success" @click="showProductDemo(item2.pid)">显示产品效果</el-button>
                                    <el-button v-if="item2.costate=='待确认'" class="smallButton111" type="success" @click="showProductDemo(item2.pid)">预览产品效果</el-button>
                                </div >
                            </div>
                        </div>
                       
                        
                    </div>
                </div>
        </div>
        </div>
        
        <el-dialog width="600px" class="trade_edit" :visible.sync="dialogFormVisible">
            <el-form class="trade_edit_form">
                <el-form-item class="trade_edit_form_item1" label="广告位" :label-width="formLabelWidth">
                    <a>广告位1</a>
                </el-form-item>
                <el-form-item class="trade_edit_form_item2" label="广告产品" :label-width="formLabelWidth">
                 <el-select  class="trade_edit_form_item2_1" v-model="SendCoMessage.product_type" placeholder="请选择广告产品" >
                    <el-option v-for="(item,index) in AllProduct" :key="index" :label="item.pname" :value="item.pname"></el-option>
                    <!-- <el-option label="iPhone13 Pro" value="iPhone13 Pro"></el-option> -->
                </el-select>
                </el-form-item>
                <el-form-item v-model="SendCoMessage.radio" class="trade_edit_form_item3" label="广告类型" :label-width="formLabelWidth">
                     按照播放量合作
                </el-form-item>
                <el-form-item class="trade_edit_form_item5" label="播放量" :label-width="formLabelWidth">
                    <el-input  v-model="SendCoMessage.input1" placeholder="请输入播放量"></el-input>
                    <span class="trade_edit_form_item5_1" >万次</span>
                </el-form-item>
                <el-form-item class="trade_edit_form_item6" label="合作意向" :label-width="formLabelWidth">
                    <!-- <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入合作意向说明"
                        v-model="SendCoMessage.textarea">
                    </el-input> -->
                </el-form-item>
                <el-form-item class="trade_edit_form_item7" label="投送价格" :label-width="formLabelWidth">
                    <el-input  v-model="SendCoMessage.input2" placeholder="请输入价格"></el-input>
                    <a class="trade_edit_form_item7_1">元</a>
                </el-form-item>
            </el-form>
            <div class="trade_edit_form_button">
                <el-button class="trade_edit_form_button1" @click="dialogFormVisible = false; RePostDialog()" type="success">保存</el-button>
                <el-button class="trade_edit_form_button2" type="danger" @click="dialogFormVisible = false;stopCooperation()">取消合作</el-button>
            </div>
        </el-dialog>

        <el-dialog width="600px" class="trade_edit" :visible.sync="dialogForm2Visible">
            <el-form class="trade_edit_form">
                <el-form-item class="trade_edit_form_item1" label="广告位" :label-width="formLabelWidth">
                    <a>广告位1</a>
                </el-form-item>
                <el-form-item class="trade_edit_form_item2" label="广告产品" :label-width="formLabelWidth">
                <el-select  class="trade_edit_form_item2_1" v-model="SendCoMessage.product_type" placeholder="请选择广告产品">
                    <el-option  v-for="(item,index) in AllProduct" :key="index" :label="item.pname" :value="item.pname"></el-option>
                    <!-- <el-option label="iPhone13 Pro" value="iPhone13 Pro"></el-option> -->
                </el-select>
                </el-form-item>
                <el-form-item class="trade_edit_form_item3" label="广告类型" :label-width="formLabelWidth">
                    按照播放量合作
                </el-form-item>
                <el-form-item class="trade_edit_form_item5" label="播放量" :label-width="formLabelWidth">
                    <el-input  v-model="SendCoMessage.input1" placeholder="请输入播放量"></el-input>
                    <span class="trade_edit_form_item5_1" >万次</span>
                </el-form-item>
                <el-form-item class="trade_edit_form_item6" label="合作意向" :label-width="formLabelWidth">
                     <el-select class="select-el"
                        v-model="value"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请选择地域标签"
                        id="ops">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="select-el"
                        v-model="value3"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请选择个人信息标签">
                        <el-option
                        v-for="item in options3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="select-el"
                        v-model="value4"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请选择偏好标签">
                        <el-option
                        v-for="item in options4"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="trade_edit_form_item7" label="投送价格" :label-width="formLabelWidth">
                    <el-input  v-model="SendCoMessage.input2" placeholder="请输入价格"></el-input>
                    <a class="trade_edit_form_item7_1">元</a>
                     <a  class="trade_edit_form_item7_1_1">底价:</a>
                     <div class="trade_edit_form_item7_1_2"><a  >{{money[0]}}元</a></div>
                </el-form-item>
            </el-form>
            <div class="trade_edit_form_button">
                <el-button class="trade_edit_form_button1_2" @click="dialogForm2Visible = false;PostDialog()" type="warning">立即创建</el-button>
                <el-button class="trade_edit_form_button2_2" type="info" @click="dialogForm2Visible = false">取消</el-button>
                <el-button class="trade_edit_form_button2_3" type="info" @click="zidong()"></el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:'adver_vedio_detail',
    data() {
        return {
            value1:'',
            dialogFormVisible: false,
            dialogForm2Visible:false,
            formLabelWidth: '120px',
            // money:'??',
            item_button1:'item_button1',
            button_message:'去合作', 
            product_type:'',
            vsource:"",
            SendCoMessage:{
                radio: '按播放次数',
                input1:[''],//播放量
                radio2:'',//广告产品
                textarea: '',//合作意向说明
                input2:'',//投送价格
                product_type:'',
            },
            video_intro:'~视频中展现的是一直棕熊在小溪中，现在的他在就已经饥肠辘辘在小溪中寻找着食物的踪迹，但一无所获。其实这只熊早早经过了万里的迁徙，因为人类们肆意的环境破坏，他不得不离开他的家园到处流浪。居无定所的他之后的日子又会是怎样呢？我们不得而知，面临他的是死亡还是救赎？小溪流淌，发出哗哗哗的水流声。他的心里也流淌着哗哗的泪！！！',
            // adver_request:'希望招募的guang'
            //视频和创作者的信息
            VideoAndCreater:{},
            //所有的广告位
            AllvideoAdver:[],
            AllProduct:[],
            money:[''],
            chooseVideo:0,
             options: [{
                value: '选项1',
                label: '杭州'
                }, {
                value: '选项2',
                label: '北京'
                }, {
                value: '选项3',
                label: '台北'
                }, {
                value: '选项4',
                label: '济南'
                }, {
                value: '选项5',
                label: '上海'
                }],
                value: [],
            //B标签--个人信息
                 options3: [{
                value: '选项1',
                label: '男'
                }, {
                value: '选项2',
                label: '女'
                }, {
                value: '选项3',
                label: '职业-程序员'
                }, {
                value: '选项4',
                label: '职业-时尚博主'
                }, ],
                value3: [],
                //B标签--偏好
                 options4: [{
                value: '选项1',
                label: '电子产品迷'
                }, {
                value: '选项2',
                label: '关注时尚'
                }, {
                value: '选项3',
                label: '关注生活'
                },],
                value4: []
        }
    },
    methods:{
        last:function(){
            this. chooseVideo=1
        },
        zidong:function(){
                var rams=JSON.parse(sessionStorage.getItem("aid"));
                console.log(rams==6)
                if(rams==6){
                    this.SendCoMessage.input2=6500
                    this.SendCoMessage.product_type="苹果电脑"
                    this.value=["选项1","选项2"]
                    this.value3=["选项1"]
                    this.value4=["选项1"]
                }
                 if(rams==8){
                    this.SendCoMessage.input2=7000
                    this.SendCoMessage.product_type="黑色皮包"
                    this.value=["选项2","选项3"]
                    this.value3=["选项2"]
                    this.value4=["选项2"]
                }
        },
        push:function(cid,vid){
            console.log(cid);
            console.log(vid);
            sessionStorage.setItem('cid',JSON.stringify(cid))
             sessionStorage.setItem('vid',JSON.stringify(vid))
            this.$router.push({path:'/producer_space'})
        },
        push2(){
            this.$router.push({path:'/adver_product'})
        },

        dialogOpen(apid,coid){
            sessionStorage.setItem('apid',apid)
             sessionStorage.setItem('coid',coid)
            if(this.item_button1=='item_button1')
            {
                this.dialogForm2Visible = true
            }
            else
                {this.dialogFormVisible = true}
        },
        acount(){
            // this.money=6000
            this.item_button1='item_button12'
            this.button_message='去编辑'
        },
        stopCooperation(){
            // this.money=6000
            this.item_button1='item_button1'
            this.button_message='去合作'
        },
        //展示产品效果
        showProductDemo(pid){
            console.log("ww")
            console.log(pid)
            if(pid==1){//电脑
               this.chooseVideo=3;
            }
            else if(pid==20){//帽子
                this.chooseVideo=2;
            }
            else if(pid==21){//包包
                this.chooseVideo=1;
            }
        },
        //初始化界面的展现
        //videoMessage接口开始
        init(){
            //获取上个界面存储的ID
            var rams=JSON.parse(sessionStorage.getItem("vid"));
            // console.log(sessionStorage.getItem("vid"));
            console.log(rams);
            console.log(typeof(rams));
            console.log(rams=="1");
            console.log(typeof("1"))
            var rams2=Number(rams);
            console.log(rams2);
            // var params1=qs.stringify(sessionStorage.getItem("vid"));
            // console.log(params1);
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/videoandcreater/findallbyvid',
               params:{"vid":rams2},
            //    headers: {'Content-Type': 'application/json; charset=utf-8'},
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            this.VideoAndCreater=arr;
            this.vsource=this.VideoAndCreater.vsource;
            console.log(this.VideoAndCreater)
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },
        //videoMessage接口结束
        //单个视频下的所有广告位，接口开始
        videoAdver(){
            //获取上个界面存储的ID
            var params=JSON.parse(sessionStorage.getItem("vid"));
            console.log(params);
            params=Number(params)
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/advertiserSpace/findall',
               params:{"vid":params},
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            this.AllvideoAdver=arr;
            console.log(789)
            console.log(this.AllvideoAdver)
            console.log(this.AllvideoAdver[0].cooperations)
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },
        //单个视频下的所有广告位，接口结束

        GetAllProduct(){
            //获取上个界面存储的ID
            var params=JSON.parse(sessionStorage.getItem("userInfo"));
            console.log(params.aid);
            params=Number(params.aid)
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/product/findallbyaid',
               params:{"aid":params},
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            this.AllProduct=arr;
            console.log(456)
            console.log(this.AllProduct)
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },
        //

        //创建合作订单并post
        PostDialog(){
             //获取上个界面存储的ID
            var params=JSON.parse(sessionStorage.getItem("apid"));
            console.log(params);
            params=parseInt(params);
            console.log(typeof(params))
            var coprice=parseInt(this.SendCoMessage.input2);
            console.log(typeof(coprice))
            var coplaybackvolume=parseInt(this.SendCoMessage.input1[params]);
            console.log(typeof(this.SendCoMessage.textarea))
            var params1={
                    "coprice":coprice,
                    "coplaybackvolume":coplaybackvolume,
                    "cointention":this.SendCoMessage.textarea,
                    "productname":this.SendCoMessage.product_type,
                    "apid":params,
            };
            console.log("789456")
            console.log(params1)
            // params1=JSON.parse(params1)
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/cooperation/edit',
               data:params1,
            }).then(response=>{
            console.log(response);
            this.$message({
                title: '成功',
                message: '创建合作成功',
                type: 'success',
                offset:75
            });
            this.videoAdver();
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },

        //修改合作订单并post
        RePostDialog(){
             //获取上个界面存储的ID
            var params=JSON.parse(sessionStorage.getItem("apid"));
            var params2=JSON.parse(sessionStorage.getItem("coid"));
            console.log(params);
            params=parseInt(params);
            params2=parseInt(params2);
            var coprice=parseInt(this.SendCoMessage.input2);
            var coplaybackvolume=parseInt(this.SendCoMessage.input1[params]);
            var params1={
                    "coid": params2,
                    "coprice":coprice,
                    "coplaybackvolume":coplaybackvolume,
                    "cointention":this.SendCoMessage.textarea,
                    "productname":this.SendCoMessage.product_type,
                    "apid":params,
            };
            // params1=JSON.parse(params1)
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/cooperation/edit',
               data:params1,
            }).then(response=>{
            console.log(response);
            this.$message({
                title: '成功',
                message: '修改合作成功',
                type: 'success',
                offset:75
            });
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },
        changemoney(index){
            if(this.SendCoMessage.input1[index]==30){
                this.money[index]='6000' 
            }
        } ,
    },

    
    // computed:{
    //     money(){
    //         let money='??'
    //         if(this.SendCoMessage.input1=='30'){
    //             money='6000' 
    //         }
    //         return money
    //     }
    // },
    mounted(){
        this.init();
        this.videoAdver();
        this.GetAllProduct();
       
    }
    
}
</script>

<style scoped>
@import "../../style/adver_vedio_detail.css";
</style>